<template>
	<view>
		<view>
			<view class="dormitoryNav">
				<view style="font-weight: 800;font-size: 42rpx;">宿舍考勤
					<view class="leaveLine"></view>
				</view>
				<button class="leaveBtn" v-if="userInfo!='部门经理' && buttonStatus" @click="submit()">提交</button>
				<button v-else></button>
			</view>
			<view class="timePos">
				<checkbox-group class="checkbox" style="margin-bottom:20rpx;" v-if="userInfo!='部门经理'"
					@change="checkFun()">
					<label style="display: flex;flex-direction: row; color:#8F8F94" @click="checkBtnCheck()">
						<checkbox class="leaveCheck" :checked="checkStatusBtn" />全选
					</label>
				</checkbox-group>
				<view v-for="(item,index) in dormitoryAttendanceArr" :key="index"
					:class="[item.leave==true?'leaveSty':'']">
					<checkbox-group class="checkbox" style="margin-bottom:20rpx;" @change="changeFun($event,item)">
						<label style="display: flex;flex-direction: row; color:#8F8F94" @click="checkOnclick(item)">
							<checkbox class="leaveCheck" value="yes" :disabled="item.disStatus"
								:checked="item.checkBtn"></checkbox>
							<view style="width:120rpx; font-size: 28rpx;" :class="[{'itemIsshow':item.isShow}]">
								{{item.studentName}}
							</view>
						</label>
					</checkbox-group>

				</view>
				<view class="displayStudentInfo">
					<view>
						<view style="width: 100%; display: flex; align-items: center;justify-content: center; ">
							<view style="width: 10%; height: 5rpx; background-color: #ddd;" class=""></view>
							<view style="padding: 10rpx; font-size: 24rpx; color: #aaa;">学员基本信息</view>
							<view style="width: 10%; height: 5rpx; background-color: #ddd;" class=""></view>
						</view>
						<view style="padding: 40rpx 0 40rpx 20rpx; display: flex;">

							<image style="width: 180rpx; height: 250rpx;"
								@click="clickImg(JSON.stringify(displayArr[0]))"
								:src="displayArr[0].stuPhoto ? displayArr[0].stuPhoto :'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png' "
								mode="">
							</image>
							<view style="margin-left: 40rpx; font-size: 24rpx;color: #aaa; margin-top: -20rpx;"
								class="">
								<view style="padding: 8rpx;">
									姓名：{{displayArr[0].studentName}}
								</view>
								<view style="padding: 8rpx;">
									性别：{{displayArr[0].sex}}
								</view>
								<view style="padding: 8rpx;">
									班级：{{displayArr[0].className}}
								</view>
								<view style="padding: 8rpx;">
									班主任：{{displayArr[0].classTeacher}}
								</view>
								<view style="padding: 8rpx;">
									电话：{{displayArr[0].teacherPhone}}
								</view>
								<view style="padding: 8rpx;">
									床位：{{displayArr[0].bedNo}}
								</view>
							</view>

						</view>
						<view class="">
							<view style="width: 100%; display: flex; align-items: center;justify-content: center; ">
								<view style="width: 10%; height: 5rpx; background-color: #ddd;" class=""></view>
								<view style="padding: 10rpx; font-size: 24rpx; color: #aaa;">学员宿舍考勤情况</view>
								<view style="width: 10%; height: 5rpx; background-color: #ddd;" class=""></view>
							</view>
							<view style="display: flex; justify-content: space-around; margin-top: 50rpx;">
								<view :class="displayArr[0].attenceStatus==2?'buttonBg': ''" class="button">未归寝</view>
								<view :class="displayArr[0].attenceStatus==4?'buttonBg': ''" class="button">批准请假</view>
								<view :class="displayArr[0].attenceStatus==1?'buttonBg': ''" class="button">正常</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<my-bottom :bottomArr="attBottoms"></my-bottom>

	</view>

</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import dormitoryCheck from "@/api/modules/dormitoryCheck.js"
	export default {
		name: "dormitoryDetail",
		data() {
			// <!-- attenceStatus考勤状态：1正常、2未归寝、3晚归、4请假 -->
			return {
				disStatus: false,
				userInfo: '',
				statusTypeList: [{
					status: '正常归寝',
					isShow: true,
					type: 1
				}, {
					status: '未归寝',
					isShow: true,
					type: 2
				}, {
					status: '晚归',
					isShow: true,
					type: 1
				}, {
					status: '批准请假',
					isShow: true,
					type: 4
				}],
				topName: '',
				userName: '李友为',
				back: true,
				back1: true,
				cancel: true,
				leave: true,
				attBottoms: [{
						name: 'home',
						icon: 'iconfont icon-yonghutongji',
						text: "考勤",
						path: `/pages/classManagement/classManagementDormitoryAttendance?`,
					},
					{
						name: 'clear',
						icon: 'iconfont icon-saoba',
						text: "卫生",
						path: '/pages/classManagement/classManageDormitoryHealth'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-baoxiu',
						text: "报修",
						path: '/pages/maintenance/dormitoryMaintenanceList'
					}
				],
				dormitoryAttendanceArr: [{
					name: '欧阳修',
					sex: '男',
					img: 'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/T-2.png',
					class: 'Y34',
					teacher: '李友为',
					tel: '18878978888',
					isShow: true,
					status: '未归寝'
				}, {
					name: '杜甫',
					sex: '男',
					img: 'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/T-2.png',
					class: 'Y36',
					teacher: '李友为',
					tel: '18878978888',
					isShow: false,
					status: '批准请假'
				}, {
					name: '李白',
					sex: '男',
					class: 'Y35',
					img: 'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/T-2.png',
					teacher: '李友为',
					tel: '18878978888',
					isShow: false,
					status: '正常归寝'
				}, ],
				displayArr: [{
					studentName: "",
					sex: "",
					className: "",
					classTeacher: "",
					phone: "",
					attenceStatus: ""

				}],
				statusArray: [],
				studentNoArray: [],
				studentListArr: [],
				buildingNo: '',
				type: '',
				dormitoryId: '',
				checkStatusBtn: false,
				buttonStatus: true,
			}
		},
		components: {
			topCom,
			bottomCom
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: "userInfo",
				success: (res) => {
					that.userInfo = res.data
				}
			})


			uni.getStorage({
				key: "userName",
				success: (res) => {
					that.userName = res.data
				}
			})
		},
		onLoad(options) {
			this.buildingNo = options.buildingNo
			this.type = options.type
			this.topName = options.dormitoryNo
			this.dormitoryId = options.dormitoryId
			this.getButtonShow()
		},
		mounted() {
			this.getAppStudentListByDId()

		},
		methods: {
			getButtonShow() {
				dormitoryCheck.getSysConfigByKey({
					'paramKey': 'dormitory.attendance.enable'
				}).then(res => {
					console.log(res)
					if (res.data.paramValue == 0) {
						this.buttonStatus = true
					} else if (res.data.paramValue == 1) {
						this.buttonStatus = false
					}

				})
			},
			clickImg(img) {
				img = JSON.parse(img)
				console.log(img)
				if (!img.stuPhoto) {
					img.stuPhoto = 'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png'
				}
				uni.previewImage({
					urls: [img.stuPhoto], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			checkBtnCheck() {
				this.checkStatusBtn = !this.checkStatusBtn
				if (this.checkStatusBtn) {
					this.dormitoryAttendanceArr.forEach((item) => {
						if (item.attenceStatus != 4) {
							item.checkBtn = true
						}
					})
				} else {
					this.dormitoryAttendanceArr.forEach((item) => {
						if (item.attenceStatus != 4) {
							item.checkBtn = false
						}
					})
				}
				this.$forceUpdate()
			},
			checkFun(e) {


			},
			callFun(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			changeFun(e, item) {
				item.checkBtn = !item.checkBtn
				if (item.checkBtn == false) {
					this.checkStatusBtn = false
				}
				this.$forceUpdate()
			},
			checkStatus(i, arr) {
				// <!-- attenceStatus考勤状态：1正常、2未归寝、3晚归、4请假 -->
				if (i.status == '正常归寝') {
					this.displayArr[0].attenceStatus = 1
				} else if (i.status == '未归寝') {
					this.displayArr[0].attenceStatus = 2
				}
				this.studentListArr.push(i)
				// this.studentListArr.forEach(())
				// arr.forEach((item,index)=>{
				// 	item.isShow = false
				// 	if(arr[index].status == i.status &&i.studentNo == arr[index].studentNo){
				// 		i.isShow = true
				// 	}

				// })
			},
			// 提交宿舍考勤所有信息
			submit() {
				console.log(123)
				this.statusArray = []
				this.studentNoArray = []
				this.dormitoryAttendanceArr.forEach((item, index) => {
					if (item.checkBtn == true) {
						this.statusArray.push(1)
					} else if (item.attenceStatus == null || (item.checkBtn == false && item.attenceStatus != 4)) {
						this.statusArray.push(2)
					} else {
						this.statusArray.push(item.attenceStatus)
					}


					this.studentNoArray.push(item.studentNo)
				})
				uni.showLoading({
					mask: true
				})
				this.$api.dormitory.createAppAttence(this.$date, this.dormitoryId, this.statusArray, this.studentNoArray)
					.then(res => {
						uni.hideLoading()
						uni.showToast({
							title: "考勤提交成功"
						})
						var _this = this
						setTimeout(function() {
							uni.navigateTo({
								url: `/pages/classManagement/classManagementDormitoryAttendance?buildingNo=${_this.buildingNo}&type=考勤`
							})
						}, 500)

						// location.reload()
					})
			},
			getAppStudentListByDId() {
				this.attBottoms[0].path =
					`/pages/classManagement/classManagementDormitoryAttendance?buildingNo=${this.buildingNo}&type=${this.type}`
				this.attBottoms[1].path =
					`/pages/classManagement/classManageDormitoryHealth?buildingNo=${this.buildingNo}&type=${this.type}`
				this.attBottoms[2].path =
					`/pages/maintenance/dormitoryMaintenanceList?buildingNo=${this.buildingNo}&type=${this.type}`
				this.$api.dormitory.getAppStudentListByDId(this.dormitoryId, this.$date).then(res => {
					// this.$api.dormitory.getAppStudentListByDId(this.dormitoryId, "2023-09-26").then(res => {
					this.dormitoryAttendanceArr = res.data
					this.dormitoryAttendanceArr.forEach((item, index) => {
						item.isShow = false
						item.checkBtn = false

						var that = this
						uni.getStorage({
							key: "userInfo",
							success: (res) => {
								that.userName = res.data

							}
						})

						if (this.userName == '部门经理') {
							item.disStatus = true
						} else {
							item.disStatus = false
						}

						item.statusTypeList = this.statusTypeList
						if (item.attenceStatus == 1) {
							item.checkBtn = true
						}
						if (item.attenceStatus == 4) {
							item.leave = true
							item.disStatus = true
						}
					})

					this.dormitoryAttendanceArr[0].isShow = true
					this.getAppStuInfoById(res.data[0].studentNo)
				})
			},
			getAppStuInfoById(studentNo) {
				this.$api.dormitory.getAppStuInfoById(studentNo, this.$date).then(res => {
					this.displayArr = res.data
				})
			},
			checkOnclick(item) {
				this.getAppStuInfoById(item.studentNo)
				this.dormitoryAttendanceArr.forEach((item, index) => {
					item.isShow = false
				})
				item.isShow = true
				// this.statusTypeList.forEach((item,index)=>{
				// 	item.isShow = true
				// })
			}
		}
	}
</script>

<style>
	.leaveSty {
		opacity: 0.3;
	}

	.statusStyle {
		position: relative;
		bottom: 0rpx;
		right: 0rpx;
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		width: 220rpx;
		height: 70rpx;
		color: white;
		font-size: 32rpx;
		line-height: 70rpx;
		font-weight: 0;
	}

	.itemIsshow {
		background-color: #eee;
		color: #808080;
		border-radius: 10rpx;
	}

	.cancel {
		width: 200rpx;
		height: 50rpx;
		background-color: #808080;
		border-radius: 20rpx;
		color: white;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.back {
		width: 200rpx;
		height: 50rpx;
		background-color: #0000FF;
		border-radius: 20rpx;
		color: white;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.leave {
		width: 200rpx;
		height: 50rpx;
		background-color: #ff0088;
		border-radius: 20rpx;
		color: white;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.attendanceLine {
		width: 370rpx;
		height: 2rpx;
		background-color: #8F8F94;
	}

	.displayStudentInfo {
		position: absolute;
		top: 0rpx;
		right: 20rpx;
		width: 490rpx;
		height: 500rpx;
		box-shadow: 0upx 0upx 10upx 0upx #8F8F94;
		padding-top: 20rpx;
		padding-bottom: 280rpx;
		border-radius: 20rpx;
		/* padding-left: 50rpx; */
		/* border:1px #999999 solid; */
	}

	.leaveCheck {
		margin-left: 20rpx;
		margin-bottom: 30rpx;
	}

	.timePos {
		position: relative;
		top: 60rpx;
		right: 0px;
		background: white;
		border-radius: 20rpx;
		/* padding:20rpx; */
		margin-bottom: 20rpx;
		font-size: 32rpx;
	}

	.dormitoryNav {
		color: #0000FF;
		margin-left: 60rpx;
		/* margin-top: 30rpx; */
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding-top: 50rpx
	}

	.leaveLine {
		width: 220rpx;
		height: 8rpx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -30rpx;
	}

	.button {
		width: 120rpx;
		height: 80rpx;
		background-color: #eee;
		border-radius: 10rpx;
		text-align: center;
		line-height: 80rpx;
		color: #aaa;
		font-size: 28rpx;
	}

	.buttonBg {
		background-color: #f15c24;
		color: #fff;
	}
</style>
